<template>
   <div style="background:#f5f5f5;padding-top:105px;height: 83.5vh;">
         <div class="wrapCenter" style="background:#FFF;width: 1142px;height: 70vh;">
            <div class="home-TUIKit-main">
                <div :class="env?.isH5 ? 'conversation-h5' : 'conversation'"
                    v-show="!env?.isH5 || currentModel === 'conversation'">
                    <TUISearch class="search" />
                    <TUIConversation @current="handleCurrentConversation" />
                </div>
                <div class="chat" v-show="!env?.isH5 || currentModel === 'message'">
                    <TUIChat>
                    </TUIChat>
                </div>
            </div>
        </div>
    </div> 
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { TUIEnv } from '../TUIKit/TUIPlugin';


export default defineComponent({
    name: 'App',
    setup() {
        const data = reactive({
            env: TUIEnv(),
            currentModel: 'conversation',
        });
        const handleCurrentConversation = (value: string) => {
            data.currentModel = value ? 'message' : 'conversation';
        };
        return {
            ...toRefs(data),
            handleCurrentConversation,
        };
    },
});
</script>
  
<style scoped>
.home-TUIKit-main {
    display: flex;
    height: 70vh;
    overflow: hidden;
}

.search {
    padding: 12px;
}

.conversation {
    min-width: 285px;
    flex: 0 0 24%;
    border-right: 1px solid #f4f5f9;
}

.conversation-h5 {
    flex: 1;
    border-right: 1px solid #f4f5f9;
}

.chat {
    flex: 1;
    height: 100%;
    position: relative;
}
</style>